<template>
    <p>这是一个home✌</p>
    <h1>js路由跳转</h1>
    <button @click="pushStr">跳转</button>
    <button @click="pushPath">push-path-跳转</button>
    <button @click="pushPathQuery">push-path-query</button>
    <button @click="pushNameParams">push-path-params</button>
    <button @click="pushDyuRouteByPath">动态路由-path-params</button>
    <button @click="pushDyuRouteByName">动态路由-name-params</button>
    
    <h1>vuex</h1>
    <button @click="updateVuexCount">修改count</button>
    <button @click="updateVuexCountByObj">修改count-对象方式</button>

    <button @click="getCount">actions-接口请求</button>
    <button @click="getCountByObj">actions-接口请求-对象方式</button>

    <button @click="moduleComGloMut">触发-moduleB-触发全局mutation</button>
    <button @click="moduleComGloAct">触发-moduleB-触发全局action</button>
</template>

<script>
export default {
    methods:{
         pushStr(){
         this.$router.push('/about')
      },
      pushPath(){
         this.$router.push({path:'/about'})
      },
      pushPathQuery(){
         this.$router.push({path:'/about', query:{id:111}})
      },
      pushDyuRouteByPath(){
         const id = 123;
         this.$router.push({path:'/product' + '/' + id})
      },
      pushDyuRouteByName(){
         this.$router.push({name:'product',params:{id:456}})
      },
      updateVuexCount(){
         this.$store.commit('incrementMut',{count:20})
      },
      updateVuexCountByObj(){
         this.$store.commit({
            type:'incrementMut',
            count:30
         })
      },
      getCount(){
         this.$store.dispatch('incrementAct',{count:200})
      },
      getCountByObj(){
         this.$store.dispatch({
            type:'incrementAct',
            count:200
         })
      },

      moduleComGloMut(){
         this.$store.dispatch('b/asyncGloBalMut',{count:1000})
      },
      moduleComGloAct(){
         this.$store.dispatch('b/asyncGloBalAct',{count:2000})
      }
    //   pushNameParams(){
    //       this.$router.push({name:'about', state:{params:{name:'tom',id:111}}})
    //   }
    },
}
</script>
